import {PageContainer, ProTable} from '@ant-design/pro-components';
import {DatePicker, Table, Tag} from "antd";
import {useEffect, useRef, useState} from 'react';
import {result} from './service';
import error from './error.png';
import ok from './ok.png';
import {useParams} from "@umijs/max";
import dayjs from "dayjs";

let timer: any;
export default () => {
  const actionRef = useRef<any>(null);
  const [params,setParams] = useState<Record<string, any>>({
    ...useParams(),
    date: dayjs().format('YYYY-MM-DD'),
  });
  const reload = () => {
    timer = setInterval(() => {
      actionRef.current?.reload();
    }, 5000);
  }
  useEffect(() => {
    reload();
  }, []);

  return (
    <PageContainer childrenContentStyle={{ padding: 16 }} title={false}>
      <ProTable
        headerTitle={<><DatePicker value={dayjs(params.date)} style={{width:200}} onChange={e=>{
          const date = dayjs(e).format("YYYY-MM-DD");
          if(date!==dayjs().format("YYYY-MM-DD")){
            //clearInterval(timer)
          }else{
            //reload()
          }
          setParams({
            ...params,
            date,
          })
          reload();
        }} /></>}
        loading={false}
        bordered
        actionRef={actionRef}
        options={false}
        search={false}
        request={result}
        pagination={{
          pageSize:1000
        }}
        params={params}
        rowClassName={(record, index) => {
          if (record.win) {
            return 'row-success1';
          } else if (!record.win) {
            return 'row-error1';
          }
          return '';
        }}
        columns={[
          {
            title: '#',
            dataIndex: 'id',
            renderText:(_,record,index)=><span>{record.order}</span>,
            width:40,
          },
          {
            title: '期数',
            dataIndex: 'sn',
            width:110,
            renderText:(_,record)=>(
              <>
                <p style={{marginBottom:0,fontWeight:600,color:"#1890ff",fontSize:16}}>{record.sn}</p>
                <p style={{marginBottom:0,fontWeight:600,color:"#f50",fontSize:16}}>{dayjs(record.drawTime).format("YYYY-MM-DD")}</p>
                <p style={{marginBottom:0,fontWeight:600,color:"#f50",fontSize:16}}>{dayjs(record.drawTime).format("HH:mm:ss")}</p>
              </>
            )
          },
          {
            title: '号码',
            dataIndex: 'drawCode',
            width:200,
            renderText:(_,record)=>(
              <>
                {
                  (record.drawCode||'').split(',').filter((item: string)=>item).map((item,index)=><Tag color={parseInt(item)%2==0?'#2db7f5':'#87d068'} key={index}><span style={{fontSize:20,fontWeight:'bold'}}>{item}</span></Tag>)
                }
              </>
            )
          },
          {
            title: '预测结果',
            dataIndex: 'predictInfo',
            width:200,
            renderText:(_,record)=>{
              const drawCode = record.drawCode || '';
              const code0 = drawCode.split(",")[0];

              return (
                <>
                  {
                    record.predictInfo.length>0 && (record.predictInfo[0].odd===1?'单':'双')
                  }
                  <span style={{width:8,display:'inline-block'}} />
                  {
                    (record.drawCode||'').length>0 && record.predictInfo.length>0 && (
                      parseInt(code0)%2==record.predictInfo[0].odd?<img src={ok} style={{width: 32, height: 32 }} />:<img src={error} style={{width: 32, height: 32 }} />)
                  }
                </>
              );
            }
          },
          {
            title: '结果',
            dataIndex: 'predictResult',
            width: 60,
            renderText:(_,record)=>(
              <>
                {record.win==true && <img src={ok} style={{marginLeft:4, width: 24, height: 24 }} />}
                {record.win==false && <img src={error} style={{marginLeft:4, width: 24, height: 24 }} />}
              </>
            ),
          },
        ]}
      />
    </PageContainer>
  );
};
